<template>
	<view>
		<image :src="goodInfo.url"></image>
		<view>
			<view class="goods-title text-line-hide">{{goodInfo.name}}</view>
		</view>
		<view>
			<uni-tag :text="goodInfo.periodsName+'期抽奖'" type="error" />
			<view>
				抽奖进度：<pk-bar :pkData="pkData" ></pk-bar>
			</view>
		</view>
		<view>
			 <view class="title"><open-data type="userAvatarUrl"></open-data></view> 抽奖码 {{codeLength}}张
			 <view v-for="item in codeList">
				 <view v-if="item.source == 0">参与获取 {{item.prize_code}}</view>
				 <view v-if="item.source == 1">视频获取 {{item.prize_code}}</view>
			 </view>
		</view>
		
		<view>
			<view>
			 	<button type="warn" @click="userPrize" class="button-yuanjiao" :disabled="partakeButton">参与抽奖</button>
				<button type="warn" open-type="share" class="button-yuanjiao">分享帮抽</button>
				已有{{goodInfo.prizeNum}}人次参与，查看排行榜>
				<!-- 参与人员头像 -->
				<view v-for="item in imgList">
					<image class="title" :src="item.url"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {storeUserPrize,getUserPrizeUserId,getUserPrizeUserInfo} from "../../service/base.js"
	export default {
		components: {
		},
		data() {
			return {
		      //商品对象
			  goodInfo:{},
			  code:null,
			  codeList:[],
			  codeLength:0,
			  imgList:[],
			  pkData:{
                    left:0,
                    right:0
              },
			  partakeButton: false 
			}
		},
		onLoad() {
		  //获取商品信息
		 this.goodInfo = uni.getStorageSync("goodInfo")
		 this.pkData.right = this.goodInfo.lotteryNum
		 this.pkData.left = this.goodInfo.prizeNum
		 this.getUserPrize()
		 this.getUserPrizeList()
		},
		methods: {
		   userPrize() {
			   if(this.goodInfo.prizeNum >=  this.goodInfo.lotteryNum){
				   uni.showToast({
				   				title:"正在等待开奖不可在进行抽奖",
				   				icon: 'none'
				   })	
			   }else{
				  uni.requestSubscribeMessage({
				   		  	tmplIds: ['G9mjLhDUSgidC-JoyJkNQ8fxPl64xP-6nL9Kphe3c0A','pqlz7qVVAnf5oklc1p-SPX-F89KGB_ZWgCouSkiIRFY'],
				   		  	success: res => {
				  							console.log(res)
				   		  		this.storeUserPrize()
				   		  	}
				  }) 
			   }
		   },
		   //开始抽奖
		   storeUserPrize() {
		   	    storeUserPrize({"lottery_id":this.goodInfo.id,"source":0}).then((res) =>{
		   			// this.code = res.data.code
					this.codeList.push({
						source:0,
						prize_code:res.data.code
					})
					this.partakeButton = true;
					this.codeLength ++
					this.goodInfo.prizeNum = this.goodInfo.prizeNum + 1
					uni.setStorageSync("goodInfo",this.goodInfo)
					this.pkData.left = this.pkData.left + 1
		     	})
		   },
		   getUserPrize() {
			   getUserPrizeUserId({"lottery_id":this.goodInfo.id}).then(res =>{
				   console.log(res)
				   var data = res.data
		           this.codeLength = data.total
				   if(this.codeLength){
					   this.partakeButton = true;
				   }
				   this.codeList = data.list
			   })
		   },
		   getUserPrizeList() {
			   getUserPrizeUserInfo({"lottery_id":this.goodInfo.id}).then(res =>{
				   this.imgList = res.data
			   })
		   },
		   onShareAppMessage(res) {
		     //发送给朋友
		     return {
		       title: '分享帮抽',
		       path: '/pages/luck/help_lucky',
		     };
		   },
		},
	}
</script>

<style>
    image {
		width: 100%;
		height: 200px;
	}  
	.title {
		width: 50px;
		height: 50px;
	}
	.button-yuanjiao {
			width: 200rpx;
			height: 50rpx;
			display: flex;
			margin-top: 30rpx;
			line-height: 50rpx;
			justify-content: center;
			border-radius: 100%;
			/* 这里可以改成渐变： background:linear-gradient(to right, #FFDE28,#FF3228) */
			background-color: #ff5500;
			font-size: 28rpx;
		}
</style>
